<template>


<div class="all">
  <!-- 这里是头部 -->
    <div class="header">
      <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title">选项</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" >我的相册</el-menu-item>
  <el-menu-item index="4" >消息中心</el-menu-item>
  <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">会员</a></el-menu-item>
   <el-menu-item index="6" class="back" @click="back">退出</el-menu-item>
   <div class="xiaoxiong">

   </div>
  <div class="setbutoon">
    <!-- 设置区域 -->
    <i class="el-icon-setting" id="setting"></i>
  </div >
  <!-- 用户名区域 -->
    <i class="el-icon-user" id="user">
      <i>{{user_name}}</i>
       </i>
       
   
</el-menu>
    </div>
  

<div class="body">
  <router-view></router-view>
</div>

</div>


<!-- 展示信息区 -->


</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        user:[],
        user_name:''
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if(key==='1'){
          this.$router.push('/home/mainhome')
        }else{
          if(key==='4'){
            this.$router.push('/home/mainnews')
          }else{
            if(key==='3'){
            this.$router.push('/home/myalbum')
            }
          }
        }
      },

      back(){
        window.sessionStorage.clear()
        this.$router.push('/')
      },

      // 查询登录用户的信息
     async userdisplay(){
        const{data:res}=await this.$http.get('user/display')
        console.log(res);
        this.user=res.data;
        this.user_name = this.user[0].user_name
      }
    },

     created(){
      this.userdisplay()
    },
  }
</script>

<style lang="less" scoped>

// 动画
  @keyframes bear {
            0% {
                background-position: 0 0;
            }
 
            /* 移动背景图，以步长为单位  */
            100% {
                background-position: -1600px 0;
            }
        }
 
        @keyframes run {
            0% {
                left: 0;
            }
 
            100% {
                /* 跑到中间 */
                left: 100%;
                transform: translate(-130%);
            }
        }

        // 小熊动画样式
        // .xiaoxiong {
        //    position: absolute;
        //     /* 每个图片的尺寸是固定的 */
        //     width: 200px;
        //     height: 100px;
        //     margin: 60px;
        //     /* 这个背景图有点像精灵图 ：熊的不同状态*/
        //     /* 熊不同的状态 组合在一起就是熊的运动状态 */
        //     background: url(@/assets/xiaoxiong.png) no-repeat;
        //     /* steps(8) 是动画的形式 几步完成动画*/
        //     /* run 是熊奔跑的动画 多个动画同时使用时  使用逗号隔开 */
        //     animation: bear .7s steps(8) infinite, run 8s forwards;
        // }

.all {
  position: relative;
}

  .header {
    padding: 61px 0 0 0;
  }

  .el-menu-demo {
    position: fixed;
    margin-left: 5px;
    margin-right: 5px;
    top:0;
    padding: 61px,0,0,0;
    width: 100%;
    left: 0;
    #setting {
      float: right;
      margin-right: 80px;
      margin-top: 15px;
      font-size: 35px;
    }

    #user {
      float: right;
       margin-right: 280px;
      margin-top: 15px;
       font-size: 30px;
      color: white;
    }
    .back {
      float: right;
    }
   
  }
</style>